var domain = " https://easy-mock.com/mock/5aa77cc22b0894377fc76653"

function data() {
	function songList() {
		var xhr = new XMLHttpRequest;
		xhr.open("GET", domain + '/songList');
		xhr.send();
		xhr.addEventListener("readystatechange", function() {
			if(xhr.status == 200 && xhr.readyState == 4) {
				obj = JSON.parse(xhr.response)
				console.log(obj)
				oarr = obj.cdlist.songlist;
				console.log(oarr)
				var qui_list = document.querySelector(".qui_list")
				var tem = "";
				oarr.forEach(function(el, index) {
					var li = document.createElement("li");
					li.classList.add("qui_list_item");
					t = `<div class="list_item_box">
								<h3>${el.title}</h3>
								<p>${el.album.title}</p>
							</div>`;
					li.innerHTML += t;
					qui_list.appendChild(li);
				})
				var profile_con = document.querySelector(".profile_con");
				profile_con.innerHTML = `${obj.cdlist.desc}`;
				var ablum_cont = document.querySelector(".ablum_cont");
				ablum_cont.innerHTML = `<h2>${obj.cdlist.dissname}</h2>
						<div class="ab_con">
							<div class="ab_img">
								<img src='${obj.cdlist.headurl}'/>
							</div>
							<span>${obj.cdlist.nickname}</span>
						</div>
						<p class="album_desc">播放量：${Math.round((obj.cdlist.visitnum)/10000).toFixed(1)}万</p>`;
				var songList_num = document.querySelector(".web section .songList .songList_title .songList_num")
				songList_num.innerHTML = `歌单<span>共${obj.cdlist.songnum}首</span>`
			}
		})
	}
	songList()
}
data()

function lyric() {
	var xhr1 = new XMLHttpRequest;
	xhr1.open("GET", domain + "/lyric");
	xhr1.send();
	xhr1.addEventListener("readystatechange", function() {
		if(xhr1.status == 200 && xhr1.readyState == 4) {
			obj1 = JSON.parse(xhr1.response)
			//			console.log(obj1.lyric)
			var lyric = obj1.lyric.replace(/&#(\d+);/g, function(el, index) {
				//				console.log(a);
				//				console.log(b);
				return String.fromCharCode(index)
			})
			lyric = lyric.replace(/\n/g, "!_!");
			lyric = lyric.split("!_!");
			var lyricArr = [];
			lyric.forEach(function(el) {
				var obj = {};
				obj.time = el.match(/\[(\s|\S)*]/g)[0]
				obj.time = obj.time.replace(/[\[\]]/g,"")
				obj.time = (obj.time.split(":")[0]*60 + parseFloat(obj.time.split(":")[1])).toFixed(2)
				obj.lyric = el.replace(/\[(\s|\S)*\]/g, "")
				lyricArr.push(obj)
			})
			lyricArr = lyricArr.filter(function(el) {
				return el.lyric != ""
			})
			console.log(lyricArr)
			var login_con = document.querySelector(".web header .logining .logining_con .lyrics .lyrics__bd")
			var t = "";
			lyricArr.forEach(function(el) {
				t = `<p>${el.lyric}</p>`
				login_con.innerHTML += t
//				nowTime(el.time)
			})
			//----------------------点击事件
			var circle_box = document.querySelector(".web header .logining .circle_box");
			var circle = document.querySelector(".web header .logining .circle_box .progress .progress_circle");
			var i = 0;
			var isClick = true;
			var lyric_p = document.querySelectorAll(".web header .logining .logining_con .lyrics .lyrics__bd p");
			var lyric_bd = document.querySelector(".web header .logining .logining_con .lyrics .lyrics__bd");
			var audio = document.querySelector("audio");
			var index = 0;
			var i=0;
			console.log([audio])
			circle_box.addEventListener("click", function() {
				if(isClick) {
					act = setInterval(function() {
						i+= ((per(circle.attributes.r.value)/audio.duration)/10);
//						(per(circle.attributes.r.value * 60 / audio.duration)) 
						circle.style.strokeDasharray = "" + i + " " + per(circle.attributes.r.value) + ""
					}, 100)
					audio.play();
//					a_time = setInterval(function() {
//						//				console.log(lyric_p.length)
//						if(index < lyric_p.length) {
//							index++;
//							//					console.log(index)
//							lyric_bd.style.transform = "translateY(" + index * (-lyric_p[0].clientHeight) + "px)"
//						} else {
//							clearInterval(a_time)
//						}
//					}, 1000)
					isClick = false;
				} else {
					clearInterval(act);
					audio.pause();
//					clearInterval(a_time);
					isClick = true;
				}
			})
			audio.addEventListener("timeupdate", function(e) {
				var currentTime = this.currentTime;
//				console.log(e.target.currentTime)
				for(var i=0;i<lyric_p.length;i++){
					if(currentTime>lyricArr[i].time){
						for(var j=0;j<lyric_p.length;j++){
							lyric_p[j].classList.remove("curron");
						}
							lyric_p[i].classList.add("curron");
							login_con.style.top = "-"+lyric_p[i].offsetTop+"px"
					}
				}
			})

			function per(r) {
				return 2 * r * Math.PI
			}

			function songTime(time) {
				change = per(circle.attributes.r.value) / time;
				if(i <= per(circle.attributes.r.value)) {
					i += change;
				}
				return i
			}
			
		}
	})
}
lyric();
//function play(){
//
//}